<template>
    <div class="sort-index">
      <div
          v-for="(item,index1) in categories"
          :key="index1"
          class="main-list"
          @mouseover="mouseFunc(index1)"
          @mouseout="mouseOut">
          {{item.name}}
          <div class="sub-list" v-show="item.active">
              <div 
                  v-for="(sub, index2) in item.subCategory"
                  :key="index2"
                  class="sub-list-item">
                  {{ sub }}
              </div>
          </div>
        </div>
    </div>
</template>
<script>
import config from "@/config/config"
export default {
  name:'Sort',
  data () {
    return {
      categories: config.categories.map(item => ({
        ...item,
        active: 0,
      }))
    }
  },
  methods: {
    mouseFunc (index) {
      this.categories[index].active = 1
    },
    mouseOut () {
      this.categories.forEach(element => {
        element.active = 0
      });
    }
  }
}
</script>
<style scoped>
.sort-index{
  background-color:goldenrod;
  width: calc(24% - 10px);
  float: left;
  padding: 10px 0 10px 10px;
  font-size: 18px;
} 
.main-list{
  position: relative;
  cursor: pointer;
  background-color:rgb(124, 0, 0);
  color: white;
  padding: 8px;
  height: 24px;
  line-height: 24px;
}
.main-list:hover{
  background-color: navajowhite;
  color: black;
}
.sub-list{
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 2;
  background-color: lightpink;
}
.sub-list-item{
  padding: 4px 8px;
}
.sub-list-item:hover{
  background-color: white;
  color: black;
}
</style>